<template>
	<view>
		<video v-if="video.url" :src="video.url" controls objectFit="contain" @timeupdate="playing"
		 show-center-play-btn show-fullscreen-btn show-mute-btn show-progress :title="video.title"
		 @loadedmetadata="loadedVideo"></video>
		<button type="default" v-if="video.url" @click="chooseVideo" size="small">更换视频</button>
		<view v-else class="add" @click="chooseVideo">+</view>

		<picker mode="selector" :range="posters" @change="changePoster">
			<view>封面：{{posters[posterKind]}}</view>
		</picker>
		<video v-show="isNumber(video.poster)" :src="video.url" :controls="false" muted objectFit="contain" 
		:show-center-play-btn="false" id="cover"></video>
		<image v-if="isUrl(video.poster)" :src="video.poster" mode="aspectFit" class="cover"></image>
		<uni-easyinput v-model="video.title" placeholder="请输入视频标题" maxlength="16" />
		
		<textarea maxlength="50" auto-height adjust-position v-model="video.desc" placeholder="请输入视频描述文案" />
		
		<button type="primary" class="fabu" @click="distribute">发布视频</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				posters:['第一帧', '最后一帧', '随机一帧', '当前画面', '从相册选择', '动态随机'],
				posterKind:5,
				cover:'',
				curTime:'',
				video:{
					poster:-1,
					desc:'',
					url:'',
					size:'',
					width:'',
					height:'',
					duration:'',
					title:'',
				}
			}
		},
		methods: {
			async distribute(){
				uni.showLoading({
					title: '发布视频中(0%)...',
					mask: false
				});
				uniCloud.uploadFile({
					filePath:this.video.url,
					cloudPath:`${this.video.title}@${Math.random()}`,
					onUploadProgress: (progress) => {
						const perc = (progress.loaded*100 / progress.total).toFixed(1)
						uni.showLoading({
							title: `发布视频中...(${perc}%)`,
							mask: false
						});
					},
					success: async ({fileID}) => {
						await uniCloud.callFunction({
							name:'uploadVideo',
							data:{
								...this.video,
								url:fileID,
							},
						})
						uni.showToast({
							title: '发布成功！'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: err
						});
					},
					complete: (res) => {
						uni.hideLoading()
					}
				})
			},
			
			playing({detail}){
				const {currentTime} = detail
				this.curTime = currentTime
			},
			
			isNumber(val){
				return isFinite(val)
			},
			
			isUrl(val){
				return val.toString().indexOf('://')>=0
			},
			
			changePoster({detail}){
				this.posterKind = detail.value
				switch(detail.value){
					case 0:
						this.video.poster = 0
					break
					case 1:
						this.video.poster = this.video.duration
					break
					case 2:
						this.video.poster = Math.random()*this.video.duration
					break
					case 3:
						this.video.poster = this.curTime
					break
					case 4:
						uni.chooseImage({
							count:1,
							sizeType:['compressed'],
							camera:'front',
							success: (res) => {
								const [cover] = res.tempFilePaths
								this.video.poster = cover
								console.log(cover)
							}
						})
					break
				}
				this.cover.seek(this.video.poster)
			},
			
			chooseVideo(){
				uni.chooseVideo({
					camera:'front',
					maxDuration:1800,
					compressed:true,
					sourceType:['camera', 'album'],
					success: (res) => {
						this.video.url = res.tempFilePath
					}
				})
			},
			
			loadedVideo({detail}){
				const {width, height, duration} = detail
				console.log(width, height, duration)
				this.video.width = width
				this.video.height = height
				this.video.duration = duration
				this.cover = uni.createVideoContext('cover')
				console.log(width, height, duration)
			}
		}
	}
</script>

<style>
video, .cover{
	width: 750rpx;
	height: 500rpx;
}
	
.add{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 100px;
	color:gray;
	height: 500rpx;
}

.fabu{
	position: sticky;
	bottom: 0;
}

textarea{
	width: 100%;
	box-sizing: border-box;
	border: solid 1px gray;
	border-radius: 15rpx;
	padding: 0.5em;
	min-height: 3em;
	font-size: 14px;
}
</style>
